<template>
  <view>
    <view class="myform" :class="{'addPadding':addPadFlag}">
      <uni-forms
        :value="formData"
        :rules="rules"
        ref="form"
        validate-trigger="bind"
        err-show-type="undertext"
      >
        <uni-group top="0">
          <view class="pageTitle">基本信息</view>
          <uni-forms-item name="name" label="姓名" class="form-item">
            <view class="form-title">姓名</view>
            <uni-easyinput
              type="text"
              class="rightAlign"
              placeholderStyle="font-size:34rpx;font-family: PingFang SC;color: #666666;"
              v-model="formData.name"
              placeholder="请输入姓名"
            ></uni-easyinput>
          </uni-forms-item>

          <uni-forms-item name="cardType" label="证件类型" class="form-item">
            <view class="form-title">证件类型</view>
            <picker
              :value="formData.cardType"
              :range="identityTypeList"
              range-key="label"
              @change="binddata('type', $event.detail.value)"
            >
              <view class="picker-text-x">{{
                showDicLabel(formData.cardType, identityTypeList)
              }}</view>

            </picker>
          </uni-forms-item>

          <uni-forms-item name="cardId" label="证件号码" class="form-item">
            <view class="form-title">证件号码</view>
            <uni-easyinput
              :type="formData.cardType==0?'idcard':'text'"
              v-model="formData.cardId"
              placeholderStyle="font-size:34rpx;font-family: PingFang SC;color: #666666;"
              class="rightAlign"
              placeholder="请输入证件号码"
            ></uni-easyinput>
          </uni-forms-item>

          <uni-forms-item
            name="telPhone"
            label="电话号码"
            :class="{'isNoBtmborder':(personClassify && personClassify!=7)}"
            class="form-item "
          >
            <view class="form-title">手机号码</view>

            <uni-easyinput
              type="number"
              class="rightAlign "
              v-model="formData.telPhone"
              placeholderStyle="font-size:34rpx;font-family: PingFang SC;color: #666666;"
              placeholder="请输入手机号码"
            ></uni-easyinput>
          </uni-forms-item>

          <!-- <uni-forms-item
            v-if='addPerson'
            name="personTypeIndex"
            label="人员类型"
            class='form-item noBorder'>
              <view class="form-title">人员类型</view>
              <picker
                @change="changePersonType"
                :value="personTypeIndex"
                :range="personTypeList"
                range-key="label"
                class="popup-control-con-picker"
              >
                <view style="display: inline-block" class="uni-input">{{
                  personTypeList[personTypeIndex].label
                }}</view>
                <view style="display: inline-block; float: right">
                  <image
                    class="popup-control-arr-show"
                    style="width:60rpx;height:40rpx;"
                    src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
                    mode="widthFix"
                  ></image>
                </view>
              </picker>
          </uni-forms-item> -->


        </uni-group>


        <view class="example">
          <button class="submit" @click="submitForm">下一步</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { getData } from "@/api/index";
export default {
  data() {
    return {
      formData: {
        codeId: "",
        name: "", //姓名
        cardType: "0", //证件类型
        cardId: "", //证件号码
        telPhone: '', //电话号码
        type: "入境人员", //人员类型
        moveDay: "14", //隔离天数
        houseId: "", //房间选择
        moveStartTime: "", //入住时间
        remark: "", //备注
        roomNum: "",
        addrAreaVal: '',
        daSourceId: "", // CHN-C81683114
        hotelBaseInfoName: '',
        hotelBaseInfoId: '',
      },
      searchPanel: false,
      addPadFlag: false,
      roomCheck: 102,
      identityTypeList: [
        // {value:1, label:"居民身份证"},
        // {value:2, label:"临时居民身份证"},
        // {value:3, label:"军官证"},
        // {value:4, label:"港澳居民往来内地通行证"},
        // {value:5, label:"台湾居民来往大陆通行证"},
        // {value:6, label:"护照"},
        // {value:7, label:"其他"},
        // {value:8, label:"港澳居民居住证"},
        // {value:9, label:"台湾居民居住证"},
      ],
      dictionaries: {
        1: '0',
        2: '0',
        3: '88',
        4: '55',
        5: '66',
        6: '1',
        7: '9',
        8: '89',
        9: '90',
      },
      addrAreaVal: 0,
      addrAreaArr: [],
      show: false,
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请录入姓名"
            }
          ]
        },
        cardType: {
          rules: [
            {
              required: true,
              errorMessage: "请录入证件类型"
            }
          ]
        },
        cardId: {
          rules: [
            {
              required: true,
              errorMessage: "请录入证件号码"
            }
          ]
        },
        telPhone: {
          rules: [
            {
              required: true,
              errorMessage: "请录入手机号码"
            },{
              pattern: '^1[0-9]{10}$',
              errorMessage: "手机号码格式不正确"
				    }
          ]
        },
        daSourceId: {
          rules: [
            {
              required: true,
              errorMessage: "请录入姓名"
            }
          ]
        }
      },
      roomList: [],
      QRCodeType: "", //二维码类型
      personKey: "", // 二维码值
      personKeyVal: "",
      personClassify: '',
      suggestList: [],
      personTypeIndex:0,
      personTypeList:[],
      personInfo: {},
      isolationId:'',
    };
  },
   async onLoad(ev) {
    let personTypeList = await this.$store.dispatch('getDic','person_classify');
    this.identityTypeList = await this.$store.dispatch('getDic','card_type')
    this.getTree();
    this.personTypeList = personTypeList.sort((a,b)=>a.sort-b.sort)
    
    let personInfo = this.personInfo = uni.getStorageSync('isolationPersonnel');
    let { daSource,daSourceId } = personInfo;
    this.isolationId = uni.getStorageSync('personalInfo').isolationId
    this.formData.telPhone = personInfo.telPhone || personInfo.phone || '';
    this.formData.name = personInfo.name || '';
    let cardType = '0';
    let cardId = '';
    if(daSource == '03'){
      cardType = personInfo.cardType || personInfo.id_type || '0'
      cardId = personInfo.cardId || personInfo.id_code ||  daSourceId;
    }else{
      cardType = this.dictionaries[personInfo.cardType || personInfo.id_type] || '0'
      cardId = personInfo.cardId || personInfo.id_code || '';
    }
    this.formData.cardId = cardId;
    this.formData.cardType = cardType;
    
  },
  onReady() {},
  methods: {
    binddata(value, value2) {
      console.log(value, value2);
      this.formData.cardType = this.identityTypeList[value2].value;
    },
    changePersonType(e){
      this.personTypeIndex = e.target.value;
    },
    showDicLabel(curVal, arr) {
      let txt = "";
      arr.map(ele => {
        if (ele.value == curVal) {
          txt = ele.label;
        }
      });
      return txt;
    },

    getTree() {
      getData("divisionTree", "get", {}).then(arr => {
        arr.forEach(ele => {
          ele.label = ele.divisionName;
          ele.value = ele.divisionCode;
        });
        this.addrAreaArr = arr;
        if(arr.length>0) {
          let obj=arr[0];
          this.formData.addrAreaVal=obj.divisionCode;
        }
      });
    },


     async submitForm() {
      let obj=this.formData;
      this.$refs.form.validate().then(res => {
        console.log("提交===", res);
        if(res.cardType==0){
          let jmsfz = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z ]{1,20})$/;
          // if (!res.cardId) {
          if (!jmsfz.test(res.name)) {
            uni.showToast({
              icon: "none",
              title: "姓名不能含有数字、符号",
            });
            return
          }
        }
        if(res.cardType==0) {
          let jmsfz = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;
          // if (!res.cardId) {
          if (!jmsfz.test(res.cardId)) {
            uni.showToast({
              icon: "none",
              title: "身份证号码格式不正确",
            });
            return
          }
        }
        
        let params={
          "cardId": this.formData.cardId,
          "cardType": this.formData.cardType,
          "name": this.formData.name,
          "telPhone": this.formData.telPhone,
          "daSource": this.formData.daSourceId?'03':'02',  // 一码通03
          "daSourceId": this.formData.daSourceId,
          // "hotelBaseInfoId": this.formData.hotelBaseInfoId,
          "personClassify": this.personClassify,
        }
        // params.personClassify = this.personTypeList[this.personTypeIndex].value;
        params.daSource = this.personInfo.daSource;
        params.daSourceId = this.personInfo.daSourceId;
        params.hotelBaseInfoId = this.isolationId;
        getData('addToolPerson','post',params).then(async res=>{
          let data = await getData('getPersonInfo', 'get', { ...params });
          let personInfo = await getData('personInfo', 'get', {
            daSource: params.daSource,
            daSourceId: params.daSourceId
          })
          uni.setStorage({ key: 'personInfo', data: personInfo && personInfo[0] || {} });
          let targetUser = data && data.length && data[0] || {}
          data.personInfo = personInfo
          uni.setStorage({ key: 'isolationPersonnel', data: targetUser });
          uni.navigateTo({
            url: `/pages/healthInspect/index?addPerson=true`,
          });
        });
      });
    },

  },
  components: {},
  watch: {
    searchPanel(newVal){
      if(newVal==false) this.addPadFlag=false;
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
//

.person-key {
  font-size: 34rpx;
}
.checkRoorm {
  pointer-event: none;
  .img {
    pointer-event: auto;
  }
  p {
    font-size: 34rpx;
    line-height: 60rpx;
    color: #000000;
    &.noValue {
      color: #ccc;
    }
  }
  // .uni-easyinput {
  //   font-size: 34rpx;
  //   color: #000000;
  //   font-
  .picker-text {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 300;
    line-height: 48px;
    color: #666666;
    opacity: 1;
  }
  .geli {
    position: relative;
    .tian {
      position: absolute;
      left: 20rpx;
      top: 50rpx;
      transform: translateY(-50%);
    }
  }
}
.picker-control {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  align-items: center;
  color: #333333;

  &-title {
    font-weight: 500;
    font-size: 26rpx;
  }

  &-con {
    &-picker {
      margin-top: 20rpx;
      padding: 10rpx 20rpx;
      text-align: left;
      border: 1px solid #f2f2f2;
      border-radius: 8rpx;

      &-date {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid #f2f2f2;

        .uni-input {
          line-height: 80rpx;
        }
      }

      .uni-input {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 26rpx;
      }
    }
  }
}
.form-item {
  position: relative;
  /deep/ .uni-forms-item__inner {
    margin: 0;
    padding-bottom: 0 !important;
  }
  /deep/ .uni-forms-item__content {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.myform {
  min-height: calc(100vh - 50rpx);
  background-color: #f9f9f9;
  /deep/ .uni-forms-item__label {
    display: none !important;
  }
  .rightAlign {
    // float: right;
    /deep/ .uni-easyinput__content-input {
      text-align: right;
    }
    /deep/ .uni-easyinput {
      width: 80vw;
    }
  }
}
.cl {
    color: red;
  }
.picker-text-x {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 48px;
  color: #666666;
  opacity: 1;
}
.pageTitle {
  font-size: 40rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  opacity: 1;
  background-color: #fff;
  // padding: 10rpx 32rpx;
}
.form-title {
  position: absolute;
  left: 0;

  font-size: 30rpx;
  color: #999999;
}
.gelidian {
  height: 38px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #eaeaea;
  /deep/ .uni-forms-item__label {
    display: none !important;
  }
}
.hotel-search {
  /deep/ .uni-forms-item__label {
    display: none !important;
  }
  /deep/ .is-input-border {
  }
}
.imageIcon {
  display: inline-block;
  width: 44rpx;
  height: 44rpx;
  margin-top: 2px;
  margin-right: 6px;
}
.ewm-input {
  /deep/ .uni-easyinput {
    width: 80% !important;
  }
}
.sysBtn {
  border: 1px solid #eaeaea;
  display: inline-block;
  position: absolute;
  right: 0;
  // top: 50%;
  // transform: translateY(-50%);
  bottom: 10px;
}
.addr-select {
  // height: 38px;
  // line-height: 38px;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 37rpx;
  color: #000000;
  opacity: 1;
  display: flex;
  align-items: center;
}
.divi-bar {
  height: 32rpx;
  background: #F9F9F9;
  width: 200vw;
  transform: translateX(-50px);
}
.isNoBtmborder {
  /deep/ .uni-forms-item__inner {
    border-bottom: none !important;
  }
}
.tips {
  height: 98rpx;
  background: #ffffff;
  opacity: 1;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #2c9af1;
  opacity: 1;
  display: flex;
  align-items: center;
  width: 100vw;
  border-bottom: 1rpx solid #e5e5e5;
  transform: translateX(-15px);
  padding-left: 15px;
}
.search-row {
  display: flex;
  padding: 30rpx 0;
  position: relative;
  .left-side {
    height: 56rpx;
    width: 240rpx;
    padding-left: 30rpx;
    border: 1px solid #999999;
    border-radius: 60rpx;
    position: relative;
    z-index: 10;
  }
  .right-side {
    border-radius: 60rpx;
    border: 1px solid #999999;
    z-index: 10;
    flex: 1;
    position: relative;
    margin-left: 4rpx;
    .search-input {
      height: 100% !important;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      opacity: 1;
      &::-webkit-input-placeholder {
      color: #cccccc;
      }
    }
  }
}
.search-reslist {
  position: absolute;
  top: 100rpx;
  max-height: 40vh;
  border: 1rpx solid #f2f2f2;
  overflow-y: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  width:86vw;
  border-radius: 10rpx;
  padding: 0 32rpx;
  background: #fff;
  .item-hotel {
    border-bottom: 1rpx solid #f2f2f2;
    padding: 12rpx 0;
    font-size: 26rpx;
    &:last-child {
      border-bottom: none;
    }
  }
}
.fade-mask {
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom: 0;
  z-index: 2;
  // background-color: green;
}
.qrcode {
  padding-top: 30rpx;
  display: flex;
  height: 160rpx;
  align-items: center;
  justify-content: space-between;
  .txt {
    font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 42rpx;
color: #666666;
opacity: 1;
margin-bottom: 20rpx;
display: inline-block;
  }
  .is-code {
    font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 48rpx;
color: #000000;
opacity: 1;
  }
}
.syis-img {
  .imageIcon {
    width: 118rpx;
    height: 118rpx;
  }
}
.nodata {
  color: #999999;
}
.addPadding {
  padding-bottom: 350px;
}
.tip-box {
  padding: 30rpx 0 10rpx ;
  font-size: 24rpx;
  // width: 520px;
  // height: 37px;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FF6010;
  opacity: 1;
}
.tipBorderTop {
  border-top: 1px solid #E5E5E5;
}
</style>
